<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>控制面板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .header p {
            font-size: 12px;
            opacity: 0.9;
        }

        .container {
            max-width: 100%;
            margin: 0;
            padding: 0;
        }

        .user-card {
            background: white;
            margin: 20px 15px 15px;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: 600;
            margin: 0 auto 15px;
            border: 4px solid white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .user-name {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .user-company {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin: 15px;
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
            text-align: center;
        }

        .stat-card:active {
            transform: scale(0.98);
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin: 0 auto 10px;
        }

        .stat-icon.blue {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .stat-icon.green {
            background: linear-gradient(135deg, #56ab2f, #a8e6cf);
            color: white;
        }

        .stat-icon.orange {
            background: linear-gradient(135deg, #f093fb, #f5576c);
            color: white;
        }

        .stat-icon.purple {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            color: white;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            margin-bottom: 3px;
        }

        .stat-label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .stat-change {
            font-size: 10px;
            margin-top: 8px;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
        }

        .stat-change.positive {
            background: #d4edda;
            color: #155724;
        }

        .stat-change.negative {
            background: #f8d7da;
            color: #721c24;
        }

        .menu-section {
            margin: 15px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            padding-left: 5px;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin: 15px;
        }

        .action-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid #f0f0f0;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .action-card:active {
            transform: scale(0.98);
        }

        .action-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 12px;
        }

        .action-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }

        .action-description {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }

        .content-section {
            margin: 15px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn:active {
            transform: scale(0.98);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 12px;
        }

        .table th,
        .table td {
            padding: 8px 6px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }

        .table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
            font-size: 11px;
        }

        .table td {
            font-size: 11px;
            color: #666;
        }

        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 500;
            display: inline-block;
        }

        .status-badge.active {
            background: #d4edda;
            color: #155724;
        }

        .status-badge.pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-badge.inactive {
            background: #f8d7da;
            color: #721c24;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 30px 20px;
        }

        .spinner {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #667eea;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .empty-state {
            text-align: center;
            padding: 30px 20px;
            color: #666;
        }

        .empty-state-icon {
            font-size: 36px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 16px;
            margin-bottom: 8px;
            color: #333;
        }

        .empty-state p {
            font-size: 12px;
            line-height: 1.4;
        }

        .content-wrapper {
            padding-bottom: 20px;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e9ecef;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 1000;
        }

        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .nav-item.active {
            color: #667eea;
        }

        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }

        .nav-label {
            font-size: 11px;
        }

        @media (max-width: 768px) {
            body {
                font-size: 13px;
            }

            .user-card {
                margin: 15px 10px 10px;
                padding: 15px;
            }

            .user-avatar {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }

            .user-name {
                font-size: 16px;
            }

            .user-company {
                font-size: 12px;
            }

            .stats-grid {
                margin: 10px;
                gap: 10px;
            }

            .stat-card {
                padding: 12px;
            }

            .stat-icon {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }

            .stat-value {
                font-size: 20px;
            }

            .menu-section {
                margin: 10px;
            }

            .section-title {
                font-size: 14px;
            }

            .quick-actions {
                margin: 10px;
                gap: 10px;
            }

            .action-card {
                min-height: 100px;
                padding: 15px;
            }

            .action-icon {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }

            .action-title {
                font-size: 14px;
            }

            .action-description {
                font-size: 11px;
            }

            .content-section {
                margin: 10px;
                padding: 12px;
            }

            .table {
                font-size: 11px;
            }

            .table th,
            .table td {
                padding: 6px 4px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>控制面板</h1>
        <p>欢迎回来，管理您的账户和活动</p>
    </div>

    <div class="container">
        <div class="content-wrapper">
            <!-- 用户信息卡片 -->
            <div class="user-card">
                <div class="user-avatar" id="userAvatar">用</div>
                <div class="user-name" id="userName">用户姓名</div>
                <div class="user-company" id="userCompany">公司名称</div>
            </div>

            <!-- 统计数据 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon blue">📊</div>
                    <div class="stat-value" id="totalActivities">0</div>
                    <div class="stat-label">总活动数</div>
                    <div class="stat-change positive">+12% 较上月</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon green">💰</div>
                    <div class="stat-value" id="totalRevenue">¥0</div>
                    <div class="stat-label">总收入</div>
                    <div class="stat-change positive">+8% 较上月</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon orange">👥</div>
                    <div class="stat-value" id="totalUsers">0</div>
                    <div class="stat-label">用户数</div>
                    <div class="stat-change negative">-3% 较上月</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon purple">📈</div>
                    <div class="stat-value" id="conversionRate">0%</div>
                    <div class="stat-label">转化率</div>
                    <div class="stat-change positive">+5% 较上月</div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="menu-section">
                <div class="section-title">快速操作</div>
                <div class="quick-actions">
                    <div class="action-card" onclick="handleAction('create')">
                        <div class="action-icon">➕</div>
                        <div class="action-title">创建活动</div>
                        <div class="action-description">创建新的营销活动或推广计划</div>
                    </div>
                    <div class="action-card" onclick="handleAction('analytics')">
                        <div class="action-icon">📈</div>
                        <div class="action-title">数据分析</div>
                        <div class="action-description">查看详细的数据分析报告</div>
                    </div>
                    <div class="action-card" onclick="handleAction('users')">
                        <div class="action-icon">👥</div>
                        <div class="action-title">用户管理</div>
                        <div class="action-description">管理用户账户和权限设置</div>
                    </div>
                    <div class="action-card" onclick="handleAction('settings')">
                        <div class="action-icon">⚙️</div>
                        <div class="action-title">系统设置</div>
                        <div class="action-description">配置系统参数和个人偏好</div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="content-section">
                <div class="section-header">
                    <div class="section-title">最近活动</div>
                    <button class="btn" onclick="refreshDashboard()">刷新数据</button>
                </div>
                <div id="recentActivities">
                    <div class="loading" id="activitiesLoading">
                        <div class="spinner"></div>
                        <p>加载中...</p>
                    </div>
                    <div class="empty-state" id="activitiesEmpty" style="display: none;">
                        <div class="empty-state-icon">📋</div>
                        <h3>暂无活动</h3>
                        <p>您还没有创建任何活动，点击上方"创建活动"开始吧！</p>
                    </div>
                    <table class="table" id="activitiesTable" style="display: none;">
                        <thead>
                            <tr>
                                <th>活动名称</th>
                                <th>状态</th>
                                <th>参与人数</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="activitiesTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="handleNavClick('home')">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item active" onclick="handleNavClick('dashboard')">
            <div class="nav-icon">📊</div>
            <div class="nav-label">控制台</div>
        </div>
        <div class="nav-item" onclick="handleNavClick('features')">
            <div class="nav-icon">🔧</div>
            <div class="nav-label">功能</div>
        </div>
        <div class="nav-item" onclick="handleNavClick('profile')">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>

    <script>
        class Dashboard {
            constructor() {
                this.init();
            }

            init() {
                this.loadUserData();
                this.loadStats();
                this.loadRecentActivities();
                this.setupEventListeners();
            }

            setupEventListeners() {
                // 页面可见性变化时刷新数据
                document.addEventListener('visibilitychange', () => {
                    if (!document.hidden) {
                        this.refreshData();
                    }
                });
            }

            loadUserData() {
                // 优先从认证管理器获取用户数据
                if (window.authManager && window.authManager.isLoggedIn()) {
                    const authUserData = window.authManager.getUserInfo();
                    if (authUserData) {
                        this.displayUserInfo(authUserData);
                        this.saveUserData(authUserData);
                        return;
                    }
                }
                
                // 从URL参数获取用户数据（备用方案）
                const userData = this.getUserDataFromUrl();
                if (userData) {
                    this.displayUserInfo(userData);
                    this.saveUserData(userData);
                }
            }

            getUserDataFromUrl() {
                // 从URL参数获取用户数据
                const urlParams = new URLSearchParams(window.location.search);
                const userData = {};
                
                const name = urlParams.get('name');
                const company = urlParams.get('company');
                const phone = urlParams.get('phone');
                const wxopenid = urlParams.get('wxopenid');
                const buserid = urlParams.get('buserid');
                const flag = urlParams.get('flag');
                const registration = urlParams.get('registration');
                
                if (name) userData.name = decodeURIComponent(name);
                if (company) userData.company = decodeURIComponent(company);
                if (phone) userData.phone = decodeURIComponent(phone);
                if (wxopenid) userData.wxopenid = decodeURIComponent(wxopenid);
                if (buserid) userData.buserid = decodeURIComponent(buserid);
                if (flag) userData.flag = decodeURIComponent(flag);
                if (registration) userData.registration = registration;
                
                return Object.keys(userData).length > 0 ? userData : null;
            }

            saveUserData(userData) {
                // 保存用户数据到localStorage
                localStorage.setItem('userData', JSON.stringify(userData));
            }

            getUserData() {
                // 从localStorage获取用户数据
                const userData = localStorage.getItem('userData');
                return userData ? JSON.parse(userData) : null;
            }

            displayUserInfo(userData) {
                document.getElementById('userName').textContent = userData.name || '未设置';
                document.getElementById('userCompany').textContent = userData.company || '未设置';
                
                // 设置用户头像（使用姓名首字）
                const avatar = document.getElementById('userAvatar');
                const name = userData.name || '用';
                avatar.textContent = name.charAt(0).toUpperCase();
            }

            loadStats() {
                // 模拟加载统计数据
                setTimeout(() => {
                    const stats = {
                        totalActivities: 24,
                        totalRevenue: 15800,
                        totalUsers: 1247,
                        conversionRate: 15.8
                    };
                    
                    this.displayStats(stats);
                }, 1000);
            }

            displayStats(stats) {
                this.animateValue('totalActivities', 0, stats.totalActivities, 2000);
                this.animateValue('totalRevenue', 0, stats.totalRevenue, 2000, '¥');
                this.animateValue('totalUsers', 0, stats.totalUsers, 2000);
                this.animateValue('conversionRate', 0, stats.conversionRate, 2000, '', '%');
            }

            animateValue(elementId, start, end, duration, prefix = '', suffix = '') {
                const element = document.getElementById(elementId);
                const increment = (end - start) / (duration / 16);
                let current = start;
                
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= end) {
                        current = end;
                        clearInterval(timer);
                    }
                    
                    if (elementId === 'totalRevenue') {
                        element.textContent = prefix + Math.floor(current).toLocaleString();
                    } else if (elementId === 'conversionRate') {
                        element.textContent = prefix + current.toFixed(1) + suffix;
                    } else {
                        element.textContent = prefix + Math.floor(current).toLocaleString();
                    }
                }, 16);
            }

            loadRecentActivities() {
                const loading = document.getElementById('activitiesLoading');
                const empty = document.getElementById('activitiesEmpty');
                const table = document.getElementById('activitiesTable');
                
                loading.style.display = 'block';
                empty.style.display = 'none';
                table.style.display = 'none';
                
                // 模拟API调用
                setTimeout(() => {
                    const activities = this.getMockActivities();
                    
                    loading.style.display = 'none';
                    
                    if (activities.length === 0) {
                        empty.style.display = 'block';
                    } else {
                        table.style.display = 'table';
                        this.displayActivities(activities);
                    }
                }, 1500);
            }

            getMockActivities() {
                return [
                    {
                        name: '春季促销活动',
                        status: 'active',
                        participants: 342,
                        createTime: '2024-03-15 14:30'
                    },
                    {
                        name: '用户注册送优惠券',
                        status: 'pending',
                        participants: 128,
                        createTime: '2024-03-14 09:15'
                    },
                    {
                        name: '品牌推广活动',
                        status: 'active',
                        participants: 567,
                        createTime: '2024-03-13 16:45'
                    },
                    {
                        name: '会员专属活动',
                        status: 'inactive',
                        participants: 89,
                        createTime: '2024-03-12 11:20'
                    }
                ];
            }

            displayActivities(activities) {
                const tbody = document.getElementById('activitiesTableBody');
                tbody.innerHTML = '';
                
                activities.forEach(activity => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${activity.name}</td>
                        <td><span class="status-badge ${activity.status}">${this.getStatusText(activity.status)}</span></td>
                        <td>${activity.participants}</td>
                        <td>${activity.createTime}</td>
                        <td>
                            <button class="btn" style="padding: 5px 10px; font-size: 12px;" onclick="viewActivity('${activity.name}')">查看</button>
                        </td>
                    `;
                    tbody.appendChild(row);
                });
            }

            getStatusText(status) {
                const statusMap = {
                    'active': '进行中',
                    'pending': '待审核',
                    'inactive': '已结束'
                };
                return statusMap[status] || status;
            }

            refreshData() {
                this.loadStats();
                this.loadRecentActivities();
            }
        }

        // 全局函数
        function handleAction(action) {
            console.log('Action clicked:', action);
            
            switch(action) {
                case 'create':
                    alert('创建活动功能开发中...');
                    break;
                case 'analytics':
                    alert('数据分析功能开发中...');
                    break;
                case 'users':
                    alert('用户管理功能开发中...');
                    break;
                case 'settings':
                    alert('系统设置功能开发中...');
                    break;
            }
        }

        function refreshDashboard() {
            const dashboard = new Dashboard();
            dashboard.refreshData();
        }

        function viewActivity(activityName) {
            console.log('View activity:', activityName);
            alert(`查看活动: ${activityName}`);
        }

        function handleNavClick(nav) {
            console.log('Nav clicked:', nav);
            
            switch(nav) {
                case 'home':
                    // 跳转到首页时带上用户参数
                    const dashboard = window.dashboardInstance;
                    let homeUrl = 'home.html';
                    
                    if (dashboard && dashboard.userData && dashboard.userData.buserid) {
                        homeUrl += `?buserid=${dashboard.userData.buserid}`;
                        if (dashboard.userData.muserid) {
                            homeUrl += `&muserid=${dashboard.userData.muserid}`;
                        }
                        if (dashboard.userData.flag) {
                            homeUrl += `&flag=${dashboard.userData.flag}`;
                        }
                    }
                    
                    window.location.href = homeUrl;
                    break;
                case 'dashboard':
                    // 当前页面，不需要跳转
                    break;
                case 'features':
                    window.location.href = 'features.html';
                    break;
                case 'profile':
                    window.location.href = 'profile.html';
                    break;
            }
        }

        // 初始化仪表板
        document.addEventListener('DOMContentLoaded', () => {
            const dashboard = new Dashboard();
            // 保存实例到全局变量，供导航函数使用
            window.dashboardInstance = dashboard;
        });
    </script>
    
    <!-- 认证系统 -->
    <script src="auth.js"></script>
    <script src="api.js"></script>
    <script src="router.js"></script>
</body>
</html>